<template>
	<view class='file-list-box'>
		<view class='top'>
			<span class="dir-title-span" @click="backFolder">文件资料</span>
			<span v-for="(dir, index) in folderDir">&nbsp;&gt;&nbsp;<span class="dir-title-span"
					@click="querySingle(dir)"
					:style='index == folderDir.length - 1 ? "color: #0091ff" : ""'>{{dir.fileTitle}}</span>
			</span>
		</view>
		<!-- <view class="btn">
			<uni-file-picker :value="fileLists" file-mediatype="pdf" mode="grid" @select="select" @progress="progress"
				@success="success" @fail="fail" />
		</view> -->
		<view class='' v-if="projectDataEntities.length > 0">
			<view class='file-content'>
				<view class='file-item' v-for="(data, index) in projectDataEntities" :key="index"
					@click="querySingle(data)">
					<image src="../../../static/img/floder.png" v-if='data.type == 0' class="img"></image>
					<image
						v-if='data.type == 1 && (data.fileSuffix == "png" || data.fileSuffix == "jpg" || data.fileSuffix == "jpeg")'
						:src='data.fileUrl' @click="preview(data)" class="pic"></image>
					<image v-if='data.type == 1 && data.fileSuffix == "pdf"' src='../../../static/img/PDF.png'
						class="pic"></image>
					<view class="text">{{data.fileTitle}}</view>
				</view>
			</view>
		</view>
		<o-empty v-else bg="#f3f3f3"></o-empty>
		<uni-fab ref="fab" :pattern="pattern" horizontal="right" vertical="bottom" direction="vertical"
			@fabClick="fabClick" />
	</view>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	import {
		parseFileSize
	} from '@/util/util.js'
	export default {
		props: {
			projectId: ''
		},
		data() {
			return {
				projectDataEntities: [],
				type: null, // 查询文件夹时需要传入类型
				parentId: null, // 查询文件夹时需要传入父Id
				folderDir: [],
				suffix: '', // 截取文件后缀，根据后缀显示图片
				pattern: { // 悬浮按钮
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				uploadUrl: 'http://manager.qy-zb.com', // 上传文件URL
			}
		},
		created() {
			this.queryList()
		},
		methods: {
			queryList() {
				post(api.ProjectDataEntities, {
					projectId: this.projectId,
					type: this.type,
					parentId: this.parentId
				}).then(res => {
					this.projectDataEntities = res.data
				})
			},
			querySingle(data) {
				if (data.type == 0) {
					// 文件夹，重新查询当前文件夹下的所有文件
					this.parentId = data.id
					this.queryFolderDir()
					this.queryList()
				} else {
					let prefix = data.fileUrl.substring(data.fileUrl.lastIndexOf('.'))
					if (prefix == '.pdf') {
						uni.navigateTo({
							url: '/components/ViewerPage?type=0&id=' + data.id
						})
					}
				}
			},
			// 点击图片显示全图
			preview(data) {
				uni.previewImage({
					urls: [data.fileUrl], // 需要预览的图片链接列表
				});
			},
			// 获取文件夹路径，顶部显示，用当前文件夹向上查询所有父节点
			queryFolderDir() {
				post(api.QueryParentList, {
					id: this.parentId
				}).then(res => {
					this.folderDir = res.data
				})
			},
			// 点击指定的文件夹名称，打开对应的文件夹
			backFolder() {
				// 点击《文件资料》
				this.parentId = null
				this.queryFolderDir()
				this.queryList()
			},
			// 点击悬浮按钮
			fabClick(e) {
				let that = this
				let formData = {}
				formData.projectId = that.projectId
				formData.token = uni.getStorageSync('Token')
				if (that.parentId != null && that.parentId != 'null') {
					formData.parentId = that.parentId
				}
				uni.chooseImage({ // 选择图片文件
					count: 1, // 最多只能选择一张图片
					success(res) {
						const tempFilePaths = res.tempFilePaths[0]; // 获取临时路径
						uni.getFileInfo({
							filePath: tempFilePaths,
							success(fileRes) {
								console.log('文件大小为', parseFileSize(fileRes.size)); // 输出文件大小
								formData.fileSize = parseFileSize(fileRes.size)
								uni.uploadFile({ // 上传文件
									url: that.uploadUrl + api.UploadProjectData, // 服务器地址
									filePath: tempFilePaths,
									name: 'multipartFile', // 表单名称
									header: {
										'Token': uni.getStorageSync('Token')
									},
									formData: formData,
									success(res) {
										console.log('上传成功');
										console.log(res);
										that.queryFolderDir()
										that.queryList()
									},
									fail(err) {
										console.error('上传失败');
										console.error(err);
									}
								});
							},
						})
					},
					fail(err) {
						console.error('选择图片失败');
						console.error(err);
					}
				});
			}
		}
	}
</script>

<style>
	@import '@/static/css/FileList.css';
</style>